<template>
  <div class="settings-buttons">
    <router-link to="/home/profileUpdate">
      <BaseButton variant="primary" size="large" >个人信息</BaseButton>
    </router-link>

    <router-link to="/home/accountSecurity">
      <BaseButton variant="secondary" size="large" >账户安全</BaseButton>
    </router-link>

    <BaseButton variant="danger" size="large" @click="logout" >退出登录</BaseButton>
  </div>
</template>

<script setup>
import { useRouter } from 'vue-router'
import BaseButton from '@/components/BaseButton.vue'
import {useAuthStore} from "@/store/authStore.js";
const router = useRouter()

// 退出登录
const authStore = useAuthStore()
const logout = () => {
  // 清除本地存储或状态
  authStore.clearToken()
  router.push({ name: 'Login' })  // 跳转到登录页面
}
</script>


<style scoped>
.settings-buttons {
  height: 100vh; /* 页面高度 */
  display: flex;
  flex-direction: column; /* 子元素按列布局 */
  justify-content: center; /* 子元素垂直居中 */
  align-items: center; /* 子元素水平居中 */
  gap: 1em; /* 按钮之间的间距 */
  width: 200px; /* 宽度 */
  margin: 0 auto; /* 确保在水平中心 */
}

</style>